<template>
  <div class="index">
    <div class="content">
      <div class="header-wrapper">
        <div class="search-wrapper">
          <el-input v-model="queryString" placeholder="请输入内容" class="input-wrapper">
            <el-button icon="el-icon-search" slot="append" @click="search"></el-button>
          </el-input>
        </div>
        <div class="account-wrapper">
          <span @click="showAccountDialog=true">Hello，{{userInfoList.username}}</span>
          <div class="account-admin" v-if="showAccountDialog" v-on:mouseleave="hideAccount">
            <span  @click="openModifyLabelDialog">修改标签</span>
            <span  @click="loginOut">退出登陆</span>
          </div>
        </div>
      </div>
      <div class="img-wrapper" v-loading="loading">
        <div class="wrapper-item" v-for="(imgItem,index) in imgList" :key="index">
          <img :src="imgItem.url" alt="">
        </div>
      </div>
      <div class="page-wrapper" v-if="showPage>1">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="totalImageCount">
        </el-pagination>
      </div>

      <!-- 修改标签Dialog -->
      <el-dialog
        title="修改标签"
        :visible.sync="modifyLabelDialog"
        width="500px"
        :before-close="handleClose">
        <div>
          <el-checkbox-group v-model="selectLabelList">
            <el-checkbox :label="labelItem.id" v-for="(labelItem,index) in myLabelList" :key="index">{{labelItem.name}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="modifyLabelDialog = false">取 消</el-button>
          <el-button type="primary" @click="confirmModifyLabel">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改标签Dialog END -->
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "index",
  data() {
    return {
      queryString: "",
      currentPage: 1,
      showAccountDialog: false,
      userInfoList: {},
      imgList: [],
      showPage: 0,
      modifyLabelDialog: false,
      selectLabelList: [],
      myLabelList: [],
      loading: false
    };
  },
  methods: {
    ...mapActions({
      _getUserInfo: "getUserInfo",
      _loginOut: "loginOut",
      _getImageList: "getImageList",
      _getMyLabelList: "getMyLabelList",
      _setMyLabel: "setMyLabel"
    }),
    async getUserInfo() {
      const res = await this._getUserInfo();
      if (res.code == 0) {
        this.userInfoList = res.data;
      }
    },
    search() {
      console.log("search");
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getImageList();
    },
    // 隐藏退出登陆div
    hideAccount() {
      this.showAccountDialog = false;
    },
    // 退出登陆
    async loginOut() {
      const res = await this._loginOut();
      if (res.code == 0) {
        this.$message.success("成功退出！！！");
        this.$router.push({ name: "Login" });
      } else {
        this.$message.error(res.msg);
      }
    },
    async getImageList() {
      this.loading = true;
      const res = await this._getImageList({
        query_string: this.queryString,
        page_no: this.currentPage
      });
      if (res.code == 0) {
        this.loading = false;
        this.imgList = res.data.image_list;
        this.totalImageCount = res.data.total_image_count;
        this.showPage = res.data.total_image_count / 20;
      } else {
        this.$message.error(res.msg);
      }
    },
    async getMyLabelList() {
      const res = await this._getMyLabelList();
      if (res.code == 0) {
        this.myLabelList = res.data.label_list;
        this.selectLabelList = [];
        res.data.label_list.map(v => {
          if (v.is_selected) {
            this.selectLabelList.push(v.id);
          }
        });
      } else {
        this.$message.error(res.msg);
      }
    },
    openModifyLabelDialog() {
      this.modifyLabelDialog = true;
      this.getMyLabelList();
    },
    handleClose() {
      this.modifyLabelDialog = false;
    },
    async confirmModifyLabel() {
      const res = await this._setMyLabel({
        label_list: JSON.stringify(this.selectLabelList)
      });
      if (res.code == 0) {
        this.$message.success("成功修改标签！！！");
        this.modifyLabelDialog = false;
      } else {
        this.$message.error(res.msg);
      }
    }
  },
  mounted() {
    this.getUserInfo();
    this.getImageList();
    this.getMyLabelList();
  },
  watch: {
    queryString() {
      this.getImageList();
    }
  }
};
</script>

<style>
.index {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.index .content {
  width: 1000px;
  padding: 10px;
  box-sizing: border-box;
  margin: 0 auto;
}
.index .content .header-wrapper {
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.index .content .header-wrapper .search-wrapper {
}
.index .content .header-wrapper .account-wrapper {
  line-height: 40px;
  position: relative;
  cursor: pointer;
}
.index .content .header-wrapper .account-wrapper .account-admin {
  width: 100px;
  height: 80px;
  text-align: center;
  position: absolute;
  top: 40px;
  right: 0;
  background: #fff;
  border: 1px solid #dcdfe6;
}
.index .content .header-wrapper .account-wrapper .account-admin span {
  display: block;
}
.index .content .header-wrapper .input-wrapper {
  width: 340px;
}
.index .content .img-wrapper {
  overflow: hidden;
}
.index .content .img-wrapper .wrapper-item {
  float: left;
  width: 173px;
  height: 130px;
  /* padding: 10px; */
  /* box-sizing: border-box; */
  border: 1px solid #ddd;
  margin: 10px;
}
.index .content .img-wrapper .wrapper-item img {
  width: 175px;
  height: 130px;
}
.index .content .page-wrapper {
  text-align: center;
  margin: 30px 0;
}
.index .el-tabs--left .el-tabs__item.is-left {
  text-align: left;
}
.index .el-checkbox {
  margin-right: 30px;
}
.index .el-checkbox + .el-checkbox {
  margin-left: 0px;
}
</style>
